<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Get picture</title>
		<!-- general css -->
		<link rel="stylesheet" href="/stylesheets/general.css" type="text/css">
		<!-- Framework CSS -->
		<link rel="stylesheet" href="/stylesheets/blueprint/screen.css" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="/stylesheets/blueprint/print.css" type="text/css" media="print">
		
		<!--[if lt IE 8]><link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

		<!-- Import fancy-type plugin for the sample page. -->
		<link rel="stylesheet" href="/stylesheets/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				key = $("#pickey").val();
				$("#alike").click(function() {
					$.ajax({
						type: "POST",
						url: "/like",
						data: "key=" + key,
						success: function(data) {
							$("#piclike").html(data);							
						},
						error: function(data) {
							alert('error');
						},
					});
				});
				
				$("#adislike").click(function() {
					$.ajax({
						type: "POST",
						url: "/dislike",
						data: "key=" + key,
						success: function(data) {
							$("#picdislike").html(data);							
						},
						error: function(data) {
							alert('error');
						},
					});
				});
			})
		</script>
		
	</head>
	<body>
		<div class="container">
			<div class="span-16 prepend-1">
				<p><b>{{ picture.title }}</b></p>
				<input type='hidden' id='pickey' value='{{ picture.key() }}' />
				<img src='{{ picture.url }}' />
				<p>
					<a href='#' id='alike'>like:</a> <span id='piclike'>{{ picture.like }}</span> | 
					<a href='#' id='adislike'>dislike:</a> <span id='picdislike'>{{ picture.dislike }}</span>
				</p>
			</div>
			
			<div class="span-7 last">
				<div class="notice">
				  Here is your picture!
				</div>
			</div>
		</div>
	</body>
</html>